<template>
  <div>
    <!--<Row class="header" type="flex" justify="start">
      <Col span="24">
        <Icon class="icon" type="ios-locate-outline"/>
        <span class="title"></span>
      </Col>
    </Row>
    <br>-->
    <div id="map" :style="{ width: width + 'px', height: height + 'px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import { sumAllList } from '@/api/yi-qing-fang-kong'
import JSON from './shenyang.json'
import mockData from './mockData.js'

export default {
  name: 'MapEchart',
  data () {
    return {
      chartData: []
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 500
      }
    },
    height: {
      type: Number,
      default: () => {
        return 300
      }
    }
  },
  mounted () {
    this.chart()
  },
  methods: {
    chart () {
      // sumAllList().then(ret => {
      if (mockData.data.errcode === 0) {
        this.chartData = mockData.data.data
        let option = {
          title: {
            text: ''
          },
          textStyle: {
            color: '#bababa'
          },
          roam: true, // 缩放平移
          legend: {
            left: '20%',
            itemHeight: 10,
            padding: [0, 0, 10, 0]
          },
          tooltip: {
            backgroundColor: 'rgba(50,50,50,0.6)'
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {
                show: false,
                title: '初始化'
              },
              saveAsImage: {}
            }
          },
          visualMap: {
            min: 800,
            max: 50000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#F7E1D4', '#FEB595', '#FF8A54', '#DC4902', '#8F3000']
            }
          },
          series: [
            {
              name: '',
              type: 'map',
              geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
              mapType: 'SY', // 自定义扩展图表类型
              label: {
                normal: { // 设置字体相关信息
                  show: true,
                  color: '#000'
                },
                emphasis: { // 设置鼠标移上去hover效果
                  show: true,
                  color: '#fff'
                }
              },
              itemStyle: { // 设置地图块的相关显示信息
                normal: {
                  areaColor: '#8db200',
                  borderColor: '#6367ad',
                  borderWidth: 1
                },
                emphasis: {
                  areaColor: '#feb6aa' // hover效果
                }
              },
              data: this.chartData
            }
          ]
        }
        echarts.registerMap('SY', JSON)
        let myChart = echarts.init(document.getElementById('map'))
        myChart.setOption(option)
      } else {
        this.$Message.error({
          content: '数据获取失败,\n' + mockData.data.errmsg
        })
      }
      // })
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }
</style>
